<!doctype html>
<!--添加积分页面-->
<html>

<head>
  <meta charset="UTF-8">
  <title>礼品换积分</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <script>
    var width =window.localStorage.getItem('width');
    document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
  </script>
  <link href="../../css/mui.min.css" rel="stylesheet" />
  <style>
    html {
      font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      height: 100%;
      background-color: #F4F4F4; !important;

      overflow: auto;
    }

    body {
      overflow-x: hidden;
      height: 100%;
    }
    p{
      margin: 0;
      color:black;
      font-size: 0.24rem;
    }

    .title{
      width: 100%;
      overflow: hidden;
      padding: 0.4rem 0 ;
      border-bottom: 1px solid #CACACA;
    }

    .title div{
      float: left;
    }
    .title div:first-child{
      margin-right: 0.3rem;
      margin-left: 0.3rem;
    }

    .title img{
      width: 1.6rem;
    }
    .headerName{
      width: 100%;
      text-align: center;
      padding: 0.2rem 0 ;
    }
    /*.programmeList{*/
      /*width: 100%;*/
    /*}*/
    /*.programme{*/
      /*margin-bottom: 0.2rem;*/
      /*background-color: white;*/

    /*}*/
    /*.programme>p:first-child{*/
      /*width: 100%;*/
      /*padding: 0.05rem;*/
      /*border-bottom: 1px solid #CACACA;*/
      /*font-size: 0.24rem;*/
    /*}*/
    /*.giftList{*/
      /*overflow: hidden;*/

      /*overflow: hidden;*/
    /*}*/
    /*.giftList>div{*/
      /*padding: 0.1rem 0 0;*/
      /*overflow: hidden;*/
      /*margin-bottom: 0.1rem;*/
    /*}*/
    /*.giftImg{*/
      /*width: 0.6rem;*/
      /*height: 0.6rem;*/
      /*border-radius: 0.3rem;*/
      /*overflow: hidden;*/
      /*margin-left: 0.3rem;*/
      /*float: left;*/
    /*}*/
    /*.giftImg img{*/
      /*width: 0.6rem;*/
    /*}*/
    /*.giftName{*/
      /*width: 5.2rem;*/
      /*float: left;*/
      /*height: 0.6rem;*/
      /*line-height: 0.6rem;*/
      /*margin-left: 0.3rem;*/
      /*border-bottom: 1px solid #CACACA;*/
    /*}*/
    /*.totalIntegral{*/
      /*width: 100%;*/
      /*text-align: right;*/
      /*padding:0.1rem  0.2rem 0.1rem 0;*/
    /*}*/
    .userInfoTitle{
      width: 100%;
      padding: 0.1rem 0;
      background-color: white;
      overflow: hidden;
      border-bottom: 1px solid #AAAAAA;
      margin-bottom: 0.2rem;
    }
    .userInfoTitle> div{
      float: left;
    }
    .userImg{
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 0.6rem;
      overflow: hidden;
      margin-right: 0.3rem;
      margin-left: 0.3rem;
    }
    .userImg img{
      width: 1.2rem;
    }
    .integralInfo{
      width: 90%;
      margin: 0.3rem auto 0.5rem;

      background-color: white;
      overflow: hidden;
      text-align: center;
    }

    .integralInfo>div{
      float: left;
      width: 50%;
      padding: 0.6rem 0;
    }
    .integralInfo p{
      color:#FF7100;
      margin-bottom: 0.1rem;
    }
    .integralInfo>div>p:nth-child(2){
      font-size: 0.34rem;
    }
    .addBtn{
      width: 60%;
      color:white;
      background-color:#FF7100;
      margin: 0 auto  ;
      padding: 0.2rem 0;
      text-align: center;
      font-size: 0.28rem;
    }

/*fixed by 黄鹍*/
    .programmeList{
      width: 100%;
    }
    .programme{
      margin-bottom: 0.2rem;
      background-color: white;
    }
    .programmeTitle{
      width: 100%;
      border-bottom: 1px solid #CACACA;
      font-size: 0.24rem;
      overflow: hidden;
      height: 0.4rem;
    }
    .programmeTitle .programmeTitleLeft{
      width: 60%;
      float: left;
      height: 99%;
      padding-left: 0.2rem;
    }
    .programmeTitle .programmeTitleright{
      float: right;
      width: 30%;
      height: 99%;
      /*background: orange;*/
      overflow: hidden;
      padding-top:0.045rem;
      text-align: center;
    }

    .giftList{
      overflow: hidden;

    }
    .giftList>div{
      padding: 0.1rem 0 0;
      overflow: hidden;
      margin-bottom: 0.1rem;
    }
    .giftImg{
      width: 0.6rem;
      height: 0.6rem;
      border-radius: 0.3rem;
      overflow: hidden;
      margin-left: 0.3rem;
      float: left;
    }
    .giftImg img{
      width: 0.6rem;
    }
    .giftName{
      width: 5.2rem;
      float: left;
      height: 0.6rem;
      line-height: 0.6rem;
      margin-left: 0.3rem;
      border-bottom: 1px solid #CACACA;
    }
    .showIntegral{
      width: 100%;
      padding:0.1rem  0.2rem ;
      overflow: hidden;
    }
    .showIntegral .singleIntegral{
      float: left;
      color: #adadad;
    }
    .showIntegral .totalIntegral{
      float: right;
    }





  </style>
</head>

<body>
<div class="mui-content" id="app" style="padding-bottom: 0.8rem">
    <!--<div class="title">-->
    <!--<div>-->
      <!--<img :src="config.imgPath + classInfo.icon" alt="">-->
    <!--</div>-->
    <!--<div>-->
      <!--<p> <strong>{{classInfo.name}}</strong> </p>-->
      <!--<p>{{new Date(classInfo.startTime).format('yyyy.MM.dd')}} - {{new Date(classInfo.endTime).format('yyyy.MM.dd')}} </p>-->
    <!--</div>-->
  <!--</div>-->
  <!--会员信息-->
  <div class="userInfoTitle">
    <div class="userImg">
      <img :src="userInfo.header" alt="">
    </div>
    <div>
      <p>{{userInfo.userName}} </p>
      <p>ID:{{                           userInfo.userId*1}}</p>
      <p>当前积分：{{userInfo.point}}</p>
    </div>
  </div>

  <div class="programmeList">
    <div v-for="(item,index) in checkedProData" class="programme"  >
      <div class="programmeTitle">
        <p class="programmeTitleLeft">{{item.proData.name}}</p>
        <div class="programmeTitleright" >
          {{'x'+item.count}}
        </div>
      </div>

      <div class="giftList" v-for="(item1,index1) in item.proData.groupProp">
        <div>
          <div class="giftImg">
            <img :src="config.imgPath + item1.icon" alt="">
          </div>
          <p class="giftName">{{item1.name}}X{{item1.propQuantity}}</p>
        </div>
      </div>
      <p class="showIntegral">
        <span class="singleIntegral">价值：{{item.proData.ticket}}积分</span>
        <span class="totalIntegral">共获得：{{item.proData.ticket*item.count}}积分</span>
      </p>
    </div>

  </div>


    <!--积分信息-->
    <div class="integralInfo">
      <div>
        <p>积分</p>
        <p>+{{addIntegral}}</p>
      </div>
      <div>
        <p>添加后</p>
        <p>{{totalIntegral}}</p>
      </div>
    </div>
    <!--添加btn-->
    <div class="addBtn" @click="addFun">立即添加</div>

</div>





<script src="../../js/mui.min.js"></script>
<script src="../../config.js"></script>
<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

  var vm = new Vue({
    el: '#app',
    data: {
      ifShow: true,
      currentShopObj: {},
      classInfo: '',
      programmeInfo: '',
      userInfo: '',
      checkedProData:[],
      addIntegral:0,
      totalIntegral:0,
      checkedProArr:[],
    },
    created: function() {
      mui.init();
      mui.plusReady(function() {
        vm.receiveParams()
      });
      console.log(565)
    },
    methods: {
      receiveParams: function() {
        var self = plus.webview.currentWebview()
        this.currentShopObj = self.currentShopObj;
        this.classInfo = self.classInfo;
        this.programmeInfo = self.programmeInfo;
        this.userInfo = self.userInfo;
        this.checkedProData = self.checkedProData;
        this.addIntegral=0;
        this.ifShow=true;
        for(var i=0;i<this.checkedProData.length;i++){
          this.addIntegral+=this.checkedProData[i].count*this.checkedProData[i].proData.ticket;
        }
        this.totalIntegral=this.userInfo.point+this.addIntegral;
//        console.log('programmeInfo'+JSON.stringify(this.programmeInfo));
//        console.log('classInfo'+JSON.stringify(this.classInfo));
      },
      addFun:function(){

        var  vm=this;
        if(vm.ifShow){
          vm.ifShow=false;
          var item={};
          for(var i=0;i<vm.checkedProData.length;i++){
            item={
              id:vm.checkedProData[i].proData.id,
              groupId:vm.checkedProData[i].proData.id,
              groupName:vm.checkedProData[i].proData.name,
              groupCount:parseInt(vm.checkedProData[i].count),
            }
            this.checkedProArr.push(item);
          }
          // console.log(JSON.stringify(this.checkedProArr));
          var data={
            "storeId":vm.currentShopObj.storeId,
            "storeName":vm.currentShopObj.storeName,
            "operationMan":vm.currentShopObj.userName,
            "userId":vm.userInfo.userId,
            "userNick":vm.userInfo.userName,
            "scoreCount":vm.programmeInfo.ticket,
            "ticketId":this.classInfo.id,
            "ticketName":this.classInfo.name,
            "checkedProData":JSON.parse(JSON.stringify(vm.checkedProArr)),
          };
          // console.log("sendData"+JSON.stringify(data));
          config.ajax({
            url: '/mcard/card/addScore',
            data: {
              "storeId":vm.currentShopObj.storeId,
              "storeName":vm.currentShopObj.storeName,
              "operationMan":vm.currentShopObj.userName,
              "userId":vm.userInfo.userId,
              "userNick":vm.userInfo.userName,
              "scoreCount":vm.programmeInfo.ticket,
              "checkedProData":JSON.parse(JSON.stringify(vm.checkedProArr)),
              "ticketId":this.classInfo.id,
              "ticketName":this.classInfo.name

            },
            success: function(res) {
              if(res.result === 1) {
                vm.ifShow = true;
                vm.next();
              } else {
                mui.toast(res.errormsg);
                vm.ifShow = true;
              }
            },
            error:function(res){
              mui.toast(res.errormsg);
              vm.ifShow = true;
            }
          })
        }

      },
      next:function(){
        var  vm=this
        var  integral=vm.totalIntegral
        mui.openWindow({
          url: './success.html',
          id: 'success',
          styles: {
            top: 0, //新页面顶部位置
            bottom: 0, //新页面底部位置
            titleNView: {
              titleText: '卡片存积分',
              titleColor: "#FFFFFF",
              titleSize: "17px",
              backgroundColor: "#FF6800",
              autoBackButton: true,
              //                homeButton: true,
              buttons: [{
                float: "right",
                fontSize: "18px",
                fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                text: "\ue602",
                onclick: function() {
                  var allPage = plus.webview.all()
                  var nowPage = plus.webview.getWebviewById('index')
                  for(var i = 0; i < allPage.length; i++) {
                    if(allPage[i].getURL() !== nowPage.getURL()) {
                      plus.webview.close(allPage[i]);
                    }
                  }
                }
              }],
              splitLine: {
                color: "#CCCCCC",
                height: "1px"
              }
            }
          },
          extras: {
            userInfo:vm.userInfo,
            integral:integral,
            currentShopObj:vm.currentShopObj

          }
        })
      }
    }
  })

</script>
</body>

</html>